<template>
    <div>
      <el-card>
        <el-form inline>
          <el-form-item label="key:" class="mgb-0">
            <el-input v-model="fkey"></el-input>
          </el-form-item>
         <el-form-item label="名称:" class="mgb-0">
           <el-input v-model="fname"></el-input>
         </el-form-item>
          <el-form-item class="mgb-0">
            <el-button type="primary" icon="el-icon-search" @click="searchData"></el-button>
            <el-button type="success" icon="el-icon-refresh" @click="clearData"></el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card style="margin-top: 10px">
        <div style="margin-bottom: 10px">
          <el-button type="primary" @click="openAdd">新增</el-button>
        </div>
        <el-table border :data="dataList" v-loading="tableLoading">
          <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
          <el-table-column label="KEY" prop="fkey" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="名称" prop="fname" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="执行方式" prop="fruntype" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="记录调用链" width="100" align="center">
            <template slot-scope="scope">
              <el-tag v-if="!scope.row.fwritedetail" type="Info">否</el-tag>
              <el-tag v-if="scope.row.fwritedetail" type="success">是</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="备注" prop="fdescription" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="openEdit(scope.row.fid)">编辑</el-button>
              <el-button type="text" @click="editCode(scope.row.fid)">编辑JSON</el-button>
              <el-button type="text" style="color: #36c963;" @click="openTest(scope.row.fkey)">测试</el-button>
              <el-button type="text" style="color: red" @click="deleteData(scope.row.fid)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="float:right; margin: 10px 0;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 15, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          prev-text="上一页"
          next-text="下一页"
          :total="totalRows">
        </el-pagination>
      </el-card>
      <flowEdit v-if="isShowAddEdit" :fid="fid" :status="status" @close="closeAddEdit"></flowEdit>
      <monaco v-if="isShowCode" language="json" :code="code" @saveCode="saveCode" @close="closeAddEdit"></monaco>

      <el-dialog title="测试执行" width="60vw" v-if="isShowTest"
             :visible.sync="isShowTest"
             center :close-on-click-modal="false"
             :before-close="() => this.closeAddEdit(false)">
        <el-card>
          <el-row style="text-align: center;">
              <h3>执行结果请查看日志及控制台信息</h3>
          </el-row>
          <el-form label-width="75px">
              <el-row>
                  <el-form-item label="参数">
                      <el-input type="textarea" :rows="8" v-model="testParam"></el-input>
                  </el-form-item>
              </el-row>
          </el-form>
        </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="runTest">执行</el-button>
        <el-button @click="closeAddEdit(false)">取消</el-button>
      </div>
    </el-dialog>
    </div>
</template>

<script>
  import FlowApi from '@/api/module/FlowApi'
  export default {
    name: 'flow',
    components:{
      flowEdit: resolve => require(['./components/flow_edit'], resolve),
      monaco: resolve => require(['../../components/tie/monaco'], resolve),
    },
    data(){
      return{
        fkey : '',
        fname : '',
        tableLoading : false,
        dataList : [],
        page: 1, //当前页面
        pageSize : 10, // 当前页数
        totalRows : 0, // 总条数
        fid : null,
        isShowAddEdit : false,
        isShowCode:false,
        isShowTest:false,
        testParam:'',
        testKey:'',
        api : new FlowApi(),
        status : '',
        code:'',
      }
    },
    created(){
      this.getData()
    },
    methods:{
      runTest(){
        const loading = this.$loading({
          lock: true,
          text: '请耐心等待.....',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.api.runTest({key:this.testKey,paramString:this.testParam}).then(res => {
          this.$tie.showSuccess(res.message)
          console.info(res.data)
          loading.close()
        }).catch(e => {
          loading.close()
        })
      },
      openTest(fkey){
        this.testKey = fkey
        this.isShowTest = true
      },
      getData(){
        this.tableLoading = true
        let data = {
          fkey : this.fkey,
          fname : this.fname,
          pageSize : this.pageSize,
          page : this.page,
        }
        this.api.queryListPage(data).then(res => {
          this.dataList = res.data.rows
          this.page = res.data.page
          this.pageSize = res.data.pageSize
          this.totalRows = res.data.totalRows
          this.tableLoading = false
        })
      },
      // 当前页码修改时
      handleCurrentChange(page){
        this.page = page
        this.getData()
      },
      // 当前页数修改时
      handleSizeChange(pageSize){
        this.pageSize = pageSize
        this.getData()
      },
      searchData(){
        this.page = 1
        this.getData()
      },
      clearData(){
        this.fkey = ''
        this.fname = ''
      },
      //打开新增弹窗
      openAdd(){
        this.fid = null
        this.status = 'add'
        this.isShowAddEdit = true
      },
      //打开编辑弹窗
      openEdit(id){
        this.fid = id
        this.status = 'edit'
        this.isShowAddEdit = true
      },
      async editCode(id){
        this.fid = id
        this.tableLoading = true
        let data = await this.api.detail({fid:this.fid});
        this.tableLoading = false
        this.code =  data.data.fcode
        this.isShowCode = true
      },
      saveCode(value){
        this.code = value
        const loading = this.$loading({
          lock: true,
          text: `操作中，请耐心等待.....`,
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.api.updateCode({fid:this.fid,fcode:this.code}).then(res => {
          this.$tie.showSuccess(res.message)
          loading.close()
        }).catch(e => {
          loading.close()
        })
      },
      //关闭新增编辑弹窗
      closeAddEdit(isOk){
        this.isShowAddEdit = false
        this.isShowCode = false
        this.isShowTest = false
        this.fid = null
        this.code = ''
        this.testParam = ''
        this.testKey = ''
        if(isOk){
          this.getData()
        }
      },
      closeDetail(){
        this.isShowAddEdit = false
      },
      //删除
      deleteData(fid){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: `删除中，请耐心等待.....`,
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          this.api.delete({"fid":fid}).then(res => {
            this.$tie.showSuccess(res.message)
            loading.close()
            this.getData()
          }).catch(e => {
            loading.close()
          })
        }).catch(() => {
        })
      },
    },
  }
</script>
<style scoped>
</style>
